<template>
  <page-layout>
    <template #search>
      <a-form layout="inline">
        <a-form-item label="姓名">
          <a-input placeholder="请输入的姓名" allow-clear />
        </a-form-item>
        <a-form-item label="性别">
          <a-input placeholder="请输入性别" allow-clear />
        </a-form-item>
      </a-form>
    </template>
    <template #operate>
      <a-button type="primary">新建</a-button>
      <a-button>批量</a-button>
    </template>

    <div style="height: 1800px">
      <a-form
        ref="formRef"
        :size="form.size"
        :model="form"
        :style="{ width: '600px' }"
        @submit="handleSubmit"
      >
        <a-form-item field="size" label="Form Size">
          <a-radio-group v-model="form.size" type="button">
            <a-radio value="mini">Mini</a-radio>
            <a-radio value="small">Small</a-radio>
            <a-radio value="medium">Medium</a-radio>
            <a-radio value="large">Large</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          field="name"
          label="Username"
          :rules="[{ required: true, message: 'name is required' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model="form.name" placeholder="please enter your username..." />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button html-type="submit">Submit</a-button>
            <a-button @click="handleCancel">Reset</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </div>
  </page-layout>
</template>

<script setup>
import { reactive } from 'vue'
import getModalMixin from '@/mixins/modalMixin'

// search table mixins
const { formRef, handleCancel } = getModalMixin()
const form = reactive({
  size: '',
  name: ''
})

const handleSubmit = () => {}
</script>

<style lang="scss" scoped></style>
